<template>
	<view class="gui-im gui-im-bg gui-dark-bg-level-3">
		<block v-for="(item, index) in msgs" :key="index">
			<!-- 系统消息 -->
			<view class="gui-im-msg gui-flex gui-row gui-justify-content-center" v-if="item.contentType == 'system'">
				<view class="gui-im-system-msg gui-bg-black gui-dark-bg-level-1">{{item.msg}}</view>
			</view>
			<!-- 用户消息 -->
			<view v-else>
				<view class="gui-im-msg" :class="[userid == item.fid ? 'gui-im-msg-right' : 'gui-im-msg-left']">
					<view class="gui-im-face">
						<image class="gui-im-face-image"
							:src="item.fuser.u_thumb||'https://xjz.cyygkj.cn/default_user.jpeg'" mode="widthFix">
						</image>
					</view>
					<view class="gui-im-content-spacing"></view>
					<view class="gui-im-content-in">
						<view class="gui-im-name" v-if="userid != item.fid">
							<text class="gui-text-small gui-secondary-text">{{item.fuser.u_name}}</text>
						</view>

						<view v-if="item.type == 'goods' || item.type == 'fuwu'" :class="[userid == item.fid ? 'gui-im-flex-end' : '']">
							<view class="gui-flex gui-align-items-center gui-padding-middle" style="position: relative;"
								:class="[userid == item.fid ? 'gui-bg-yellow' : 'gui-bg-yellow']">

								<gui-tags  :custom-class="item.type == 'fuwu'?['gui-bg-green','gui-color-white']:['gui-bg-blue','gui-color-white']" :size="20" :text="item.type == 'goods'?'商品':'服务'" style="position: absolute;left:0;top: 0; z-index: 100;"></gui-tags>

								<image  style="width: 100rpx;height: 100rpx;border-radius: 10rpx; margin-top: 40rpx;flex-shrink: 0;"
									:src="item.content.thumb"></image>
								<view class="gui-margin-left" style="margin-top: 40rpx;">
									<view class="gui-text-small gui-color-white">{{item.content.name}}</view>
									<view class="gui-color-red gui-text-small gui-margin-top-small">￥{{item.content.money||0}}</view>
								</view>
							</view>
						</view>
						<!-- 文本消息 -->
						<view v-if="item.type == 'txt'" :class="[userid == item.fid ? 'gui-im-flex-end' : '']">
							<view class="gui-im-content-txt" :class="[userid == item.fid ? 'gui-bg-green' : '']">
								<text :style="txtContentStyle"
									:class="[userid == item.fid ? 'gui-color-white' : '']">{{item.content}}</text>
							</view>
						</view>
						<!-- 图片消息 -->
						<view v-if="item.type == 'img'" :class="[userid == item.fid ? 'gui-im-flex-end' : '']">
							<view class="gui-img-in gui-im-img">
								<image class="gui-im-img" :src="item.content" :data-img="item.content" @tap="showImgs"
									mode="widthFix"></image>
							</view>
						</view>
						<!-- 语言消息 -->
						<view v-if="item.type == 'voice'" :class="[userid == item.fid ? 'gui-im-flex-end' : '']">
							<view class="gui-flex gui-row gui-nowrap gui-align-items-center" :class="[
								'gui-im-voice-msg', 
								index == playIndex ? 'gui-bg-green' : '', 
								userid != item.fid ? 'gui-im-flex-end' : '' 
								]" :data-voice="item.content" :data-index="index" @tap="playVoice" :style="{'width':(item.length*3)+'px'}">
								<text class="gui-icons"
									:class="[index == playIndex ? 'gui-color-white' : '']">&#xe800;</text>
								<text class="gui-im-voice-msg-text"
									:class="[index == playIndex ? 'gui-color-white' : '']">{{item.length}} ”</text>
							</view>
						</view>
						<view :class="[userid == item.fid ? 'gui-text-right' : '']">
							<text class="gui-im-timer gui-block-text">{{dateTimeFormat(item.time)}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view style="height:100px;"></view>
	</view>
</template>
<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name: "gui-im-messages",
		props: {
			msgs: {
				type: Array,
				default: function() {
					return [];
				}
			},
			userid: {
				type: String,
				default: ''
			},
			group: {
				type: String,
				default: ""
			},
			txtContentStyle: {
				type: String,
				default: 'line-height:38rpx; font-size:30rpx; color:#2B2E3D;'
			}
		},
		data() {
			return {
				player: null,
				playIndex: -1
			}
		},
		created: function() {
			innerAudioContext.onPlay(() => {
				console.log('play');
			});
			innerAudioContext.onEnded(() => {
				var cIndex = Number(this.playIndex);
				this.playIndex = -1;
				for (let i = cIndex + 1; i < this.msgs.length; i++) {
					if (this.msgs[i].contentType == 'voice') {
						this.playNow(this.msgs[i].content, i);
						break;
						return;
					}
				}
			});
			innerAudioContext.onError((E) => {
				console.log(E);
			});
		},
		methods: {
			// 播放语音
			playVoice: function(e) {
				var voicelUrl = e.currentTarget.dataset.voice;
				var index = e.currentTarget.dataset.index;
				console.log(voicelUrl);
				if (this.playIndex == -1) {
					return this.playNow(voicelUrl, index);
				}
				if (this.playIndex == index) {
					innerAudioContext.stop();
					this.playIndex = -1;
				} else {
					innerAudioContext.stop();
					this.playIndex = -1;
					this.playNow(voicelUrl, index);
				}
			},
			// 语音播放基础函数
			playNow: function(voicelUrl, index) {
				this.playIndex = index;
				innerAudioContext.src = voicelUrl;
				innerAudioContext.play();
				return true;
			},
			// 图片预览
			showImgs: function(e) {
				var imgs = [];
				var imgsCurrent = e.currentTarget.dataset.img;
				for (var i = 0; i < this.msgs.length; i++) {
					if (this.msgs[i].contentType == 'img') {
						imgs.push(this.msgs[i].content);
					}
				}
				uni.previewImage({
					urls: imgs,
					current: imgsCurrent
				});
			},
			dateTimeFormat(time) {
				// string to timestamp
				const autoZero = (n) => (String(n).length === 1 ? '0' : '') + n
				let oriSecond = time / 1000
				let curSecond = parseInt(new Date().getTime() / 1000)
				let diffSecond = curSecond - oriSecond

				let curDate = new Date(curSecond * 1000)
				let oriDate = new Date(oriSecond * 1000)

				let Y = oriDate.getFullYear()
				let m = oriDate.getMonth() + 1
				let d = oriDate.getDate()
				let H = oriDate.getHours()
				let i = oriDate.getMinutes()

				// just
				if (diffSecond < 60) {
					// within a minute
					return '刚刚'
				} else if (diffSecond < 3600) {
					// within an hour
					return `${Math.floor(diffSecond / 60)}分钟前`
				} else if (
					curDate.getFullYear() === Y &&
					curDate.getMonth() + 1 === m &&
					curDate.getDate() === d
				) {
					return `今天${autoZero(H)}:${autoZero(i)}`
				}
				// yesterday
				let mewDate = new Date((curSecond - 86400) * 1000)
				if (mewDate.getFullYear() === Y && mewDate.getMonth() + 1 === m && mewDate.getDate() === d) {
					return `昨天${autoZero(H)}:${autoZero(i)}`
				} else if (curDate.getFullYear() === Y) {
					return `${autoZero(m)}月${autoZero(d)}日`
				}
				return `${Y}年${autoZero(m)}月${autoZero(d)}日`
			},
		}
	}
</script>
<style scoped>
	.gui-im {
		padding: 30rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-im {
		/* min-height: 100vh; */
	}

	/* #endif */
	.gui-im-system-msg {
		color: #FFFFFF;
		font-size: 26rpx;
		line-height: 38rpx;
		padding: 5px 10px;
		display: block;
		border-radius: 6rpx;
	}

	.gui-im-msg {
		margin-bottom: 28px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.gui-im-face {
		width: 88rpx;
		height: 88rpx;
		overflow: hidden;
		flex-shrink: 0;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 0;
	}

	.gui-im-face-image {
		width: 88rpx;
	}

	.gui-im-name {
		padding-bottom: 10rpx;
		margin-top: -5rpx;
	}

	.gui-im-content-spacing {
		width: 25rpx;
		height: 50rpx;
		flex-shrink: 0;
	}

	.gui-im-content-in {
		width: 600rpx;
		overflow: hidden;
	}

	.gui-im-content-txt {
		background-color: #E7F0F3;
		padding: 15rpx 20rpx;
		border-radius: 6rpx;
		min-width: 100rpx;
		word-break: break-all;
	}

	.gui-im-msg-right {
		flex-direction: row-reverse;
	}

	.gui-im-timer {
		margin-top: 5px;
		line-height: 30rpx;
		font-size: 22rpx;
		color: #8788A3;
	}

	.gui-im-img {
		width: 358rpx;
		border-radius: 6rpx;
	}

	.gui-im-flex-end {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}

	.gui-im-voice-msg {
		height: 80rpx;
		padding: 0 20rpx;
		background-color: #E7F0F3;
		border-radius: 6rpx;
		color: #2B2E3D;
		min-width: 100rpx;
		max-width: 400rpx;
	}

	.gui-im-voice-msg-text {
		font-size: 22rpx;
		margin: 0 5rpx;
	}

	@font-face {
		font-family: "guiimfont";
		src: url('data:font/ttf;charset=utf-8;base64,d09GRgABAAAAAARIAAsAAAAABpAOfljMqxyszBwQAGoSFheJxjYGRgYADih0telMfz23xl4GZhAIEblhYmCPr/ZxYGZl4gl4OBCSQKAC7VCZ8AeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARGInC9nJQTHaVXQA62A73736797ADO4UPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgTWxNCUzn4EBAAzjAi0AAA==');
	}

	.graceIMFont {
		font-family: "graceIMFont";
		font-size: 30rpx;
		color: #2B2E3D;
	}
</style>
